<!--
 * @Author: Redbin
 * @Date: 2022-04-01 19:49:06
 * @LastEditTime: 2023-02-17 14:57:02
 * @LastEditors: asley 1870602550@qq.com
 * @Description:
 * @FilePath: /wisdom-website/components/Header.vue
 * 以诗的格调出场，才对的起你流光溢彩的眼眸
-->
<template>
  <div class="wrap_head">
    <div class="head_con">
      <nuxt-link class="logo" to="/">
        <h2 title="联合智为，一站式智慧工地监管解决方案提供商" alt="联合智为，一站式智慧工地监管解决方案提供商">
          联合智为
        </h2>
      </nuxt-link>
      <ul class="menu_list" :class="[{ shadow: menuShow }]" :style="{
        transform: menuShow ? 'translate(0,0)' : '',
        opacity: menuShow ? 1 : 0.8,
      }">
        <li v-for="(nav, ind) in navList" :key="ind" class="menu_item" :class="{
          menu_active:
            nav.path.split('/')[1] === $route.path.split('/')[1] ||
            hoverIndex === ind,
        }" @mouseenter="handleOver(ind)" @click="handleClick(ind)">
          <nuxt-link v-if="!nav.children.length" class="menu_item_text inline-block" :to="nav.path">{{ nav.name }}
          </nuxt-link>
          <div v-else class="flex items-center pr-5 md:pr-0">
            <span class="menu_item_text flex-1">{{ nav.name }}</span>
            <img class="w-3 h-3 md:hidden" :class="{ 'rotate-180': activeIndex === ind }"
              src="~/assets/images/icon_arrow_down.png" />
          </div>
          <ul v-if="nav.children.length && menuShow" class="hidden transition-all mt-1"
            :class="{ '!block': activeIndex === ind }">
            <li v-for="(childNav, childInd) in nav.children" :key="childInd" class="leading-none py-2 pl-5 text-xs">
              <nuxt-link :to="nav.path + childNav.path">{{ childNav.name }}</nuxt-link>
            </li>
          </ul>
        </li>
      </ul>
      <div class="head_service flex items-center">
        <!-- <img class="w-8 h-8" src="~/assets/images/icon_tel.png" /> -->
        <p class="ml-1 text-[#002df9] font-extrabold" style="font-size: 20px">
          商务合作：戴经理<a class="text-lg text-[#002df9] font-extrabold" href="tel:18570855995"> 18570855995</a> <br/>
          <span class="colortran">商务合作：</span>夏经理<a class="text-lg text-[#002df9] font-extrabold" href="tel:18670725213"> 18670725213
          </a>
        </p>
      </div>
    </div>
    <div class="icon_menu" @click="handleMenu">
      <i v-if="!menuShow" class="i_menu"></i>
      <i v-else class="i_close"></i>
    </div>

    <div class="bg_hover" :class="menuShow ? 'scale-y-100' : 'scale-y-0'" @click="menuShow = false"></div>
    <div :class="{ '!block': menuShow && !activeIndex }" class="fixed bottom-10 left-10 z-50 hidden duration-300">
      <a href="tel:15367825057">
        <img class="service_link" src="~/assets/images/service.png" />
      </a>
    </div>

    <div :style="{ left: popperX - 40 + 'px', top: 56 + 20 + 'px' }" :class="{ '!block': activeFlag }"
      class="hidden absolute px-9" @mouseleave="handleLeave">
      <div v-if="activeFlag" class="popper border rounded border-[#F2F2F2] relative px-10 py-5 bg-white flex">
        <div class="popper-content">
          <div v-show="activeIndex === 1" class="text-[17px] mb-5 text-[#333]">软件中心</div>
          <div v-for="(nav, index) in navList[activeIndex].children.slice(0, 8)" :key="index">
            <nuxt-link :to="navList[activeIndex].path + nav.path"
              class="text-[#555] text-sm leading-7 whitespace-nowrap" @mouseover="activeFlag = true">{{ nav.name }}
            </nuxt-link>
          </div>
        </div>
        <div class="popper-content ml-10">
          <div v-show="activeIndex === 1" class="text-[17px] mb-5 text-[#333]">硬件中心</div>
          <div v-for="(nav, index) in navList[activeIndex].children.slice(8, navList[activeIndex].children.length)"
            :key="index">
            <nuxt-link :to="navList[activeIndex].path + nav.path"
              class="text-[#555] text-sm leading-7 whitespace-nowrap" @mouseover="activeFlag = true">{{ nav.name }}
            </nuxt-link>
          </div>
        </div>

        <div class="popper-arrow"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      menuShow: false,
      navList: [
        { name: '首页', path: '/', children: [] },
        {
          name: '产品中心',
          path: '/product',
          children: [
            {
              name: '联筑达 · 智慧工地政府级监管平台',
              path: '/lzd_government',
            },
            {
              name: '联筑达 · 智慧工地企业级管控平台',
              path: '/lzd_enterprise',
            },
            {
              name: '联筑达 · 智慧工地项目级管控平台',
              path: '/lzd_project',
            },
            { name: '筑训宝 · 劳务学习平台', path: '/zxb' },
            { name: '建巡宝 · 政务巡检/移动执法', path: '/jxb' },
            {
              name: '筑能达 · 建筑工地能耗监测管理平台',
              path: '/znd',
            },
             {
              name: '',
              path: '',
            },
             {
              name: '',
              path: '',
            },
            {
              name: '劳务实名制终端设备',
              path: '/hardware',
            },
            {
              name: '环境监测终端设备',
              path: '/hardware#environment',
            },
            {
              name: '视频监控终端设备',
              path: '/hardware#video',
            },
            {
              name: '塔机监控终端设备',
              path: '/hardware#tower',
            },
            {
              name: '升降机监控终端设备',
              path: '/hardware#lift',
            },
            {
              name: '视频会议终端设备',
              path: '/hardware#meeting',
            },
            {
              name: '智能广播终端设备',
              path: '/hardware#broadcast',
            }
          ],
        },
        {
          name: '解决方案',
          path: '/solution',
          children: [
            // { name: '自建房隐患排查系统', path: '/homescreen' },
            { name: '劳务实名制管理系统', path: '/labor' },
            { name: '环境监测系统', path: '/environment' },
            { name: '视频监控系统', path: '/video' },
            { name: '塔机监控系统', path: '/tower' },
            { name: '升降机监控系统', path: '/lift' },
            { name: '危大工程监管系统', path: '/danger' },
            { name: '混凝土搅拌站监控系统', path: '/stir' },
            { name: '物料进出监管系统', path: '/material' },
            { name: '视频会议系统', path: '/meeting' },
            { name: '智能广播系统', path: '/broadcast' },
            { name: 'VR安全教育体验馆', path: '/VR' },
            { name: 'AI场内安全行为监管', path: '/AI' },
            { name: '水电能耗监测系统', path: '/energy' },
            { name: '车辆管理系统', path: '/vehicle' },
          ],
        },
        {
          name: '案例展示',
          path: '/case',
          children: [
            { name: '政府案例', path: '#government' },
            { name: '项目案例', path: '#project' },
          ],
        },
        {
          name: '新闻动态',
          path: '/news',
          children: [
            { name: '企业新闻', path: '#enterprise' },
            { name: '行业资讯', path: '#industry' },
          ],
        },
        {
          name: '关于我们',
          path: '/about',
          children: [
            { name: '公司介绍', path: '#introduce' },
            { name: '荣誉资质', path: '#honorary' },
            { name: '行业贡献', path: '#industry' },
            { name: '团队风采', path: '#team' },
            { name: '社会公益', path: '#social' },
            { name: '联系我们', path: '#contact' },
          ],
        },
      ],
      activeFlag: false,
      hoverIndex: null,
      activeIndex: null,
      popperX: 0,
      popperY: 0,
    }
  },
  watch: {
    '$route.path'(val) {
      this.menuShow = false
      this.hoverIndex = null
      this.activeFlag = false
    },
  },
  mounted() {
    const _this = this
    window.addEventListener('resize', () => {
      if (window.innerWidth < 768 && _this.menuShow) _this.menuShow = false
      if (this.activeIndex !== null) {
        this.popperX = this.getOffsetLeft(this.activeIndex) - 20
      }
    })
  },
  methods: {
    handleOver(index) {
      this.hoverIndex = index
      if (index !== 0 && window.innerWidth > 768) {
        this.activeIndex = index
        this.activeFlag = true
        this.popperX = this.getOffsetLeft(index) - 20
      } else {
        this.activeIndex = null
        this.activeFlag = false
      }
    },
    handleClick(index) {
      const path = this.navList[index].path
      if (window.innerWidth < 768) {
        this.activeIndex = this.activeIndex ? null : index
      } else if (!['/product', '/solution'].includes(path)) {
        this.$router.push(path)
      }
    },
    handleLeave() {
      this.activeFlag = false
      this.activeIndex = null
    },
    handleMenu() {
      this.menuShow = !this.menuShow
      this.activeIndex = null
    },
    getOffsetLeft(index) {
      const obj = window.document.getElementsByClassName('menu_item')[index]
      let tmp = obj.offsetLeft
      let val = obj.offsetParent
      const clientWidth = val.clientWidth
      while (val != null) {
        tmp += val.offsetLeft
        val = val.offsetParent
      }
      if (window.innerWidth < 1024) {
        return tmp
      }
      return tmp + clientWidth / 2
    },
    handleOut() {
      this.hoverIndex = null
    },
  },
}
</script>

<style scoped>
.wrap_head {
  @apply fixed flex top-0 left-0 w-full bg-white z-10 justify-center items-center h-14 md:h-[66px];
}

.wrap_head .icon_menu {
  @apply absolute w-5 h-5 left-5 top-5 z-50 cursor-pointer;
}

.wrap_head .i_menu {
  @apply block md:hidden;
  height: 16px;
  width: 18px;
  background: url(~/assets/images/icon_menu.png) no-repeat 0 0;
  background-size: contain;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 2;
}

.wrap_head .i_close {
  display: block;
  height: 14px;
  width: 15px;
  background: url(~/assets/images/icon_menu_close.png) no-repeat 0 0;
  background-size: contain;
  position: fixed;
  left: 21px;
  top: 21px;
  z-index: 4;
}

.wrap_head .logo {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  @apply h-8 w-28 cursor-pointer md:h-[46px] md:w-[164px] md:left-28 md:top-2/4;
}

.wrap_head .logo h2 {
  text-indent: -9999px;
  display: block;
  height: inherit;
  width: inherit;
  background: url(@/assets/images/logo.png) no-repeat 0 0;
  background-size: contain;
}

.wrap_head .head_con {
  @apply relative w-full h-14 z-50 my-0 mx-auto md:h-[66px] md:px-14 xl:w-[75rem] 2xl:px-0;
  transition: 0.5s all;
}

.menu_list {
  display: block;
  position: fixed;
  background: #fff;
  width: 260px;
  height: 100vh;
  z-index: 3;
  transform: translate(-260px, 0);
  opacity: 0.8;
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
  top: 0px;
  cursor: pointer;
  @apply overflow-auto py-[90px] right-0 left-0 md:w-auto md:py-0 md:absolute md:h-[66px] md:left-auto md:right-12 md:translate-x-0 lg:right-[55%] lg:translate-x-1/2 md:flex;
}

.menu_item {
  display: block;
  margin-left: 40px;
  @apply h-auto py-3 md:py-0 relative md:ml-7 md:whitespace-nowrap md:h-[66px] md:leading-[66px];
}

.menu_active::before {
  content: '';
  background: #ff8c00;
  @apply absolute bottom-1 w-full h-[2px] hidden md:block;
}

.menu_item_text {
  @apply md:h-[66px];
}

.head_service {
  top: 50%;
  @apply scale-0 right-10 absolute -translate-y-1/2 lg:scale-100;
}

.service_link {
  width: 180px;
  height: 26px;
  z-index: 999;
  @apply xl:w-[209px] xl:h-[33px];
}

.bg_hover {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  background: rgba(0, 0, 0, 0.2);
  z-index: 2;
  transition: transform 0.3s ease;
  @apply md:h-[400px] md:absolute md:bg-white;
}

.popper {
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.16);
}
.colortran{
  color: transparent;
}
.popper-arrow {
  position: absolute;
  top: -12px;
  left: 30px;
  display: block;
  width: 0;
  height: 0;
  /* margin-right: 3px; */
  border-style: dashed dashed solid dashed;
  border-color: transparent transparent #fff transparent;
  border-width: 6px;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
}
</style>
